<template>
  <headView />
  <div class="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 py-12">
    <!-- 头部横幅 -->
    <div v-if="!isLoading" class="us-box">
      <div class="joinleft">
        <h1 class="animate-fade-in-up">领养不弃养</h1>
        <p class="animate-fade-in-up animation-delay-300">爱心领养 让流浪宠物找到归宿</p>
      </div>
      
    </div>

    <div v-else class="container mx-auto px-4 text-center py-16">
      <p class="text-xl text-orange-800">正在加载宠物信息...</p>
    </div>

    <div class="container mx-auto px-4">
      <!-- 宠物卡片网格 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <router-link
          v-for="dog in paginatedDogs"
          :key="dog.id"
          :to="{ name: 'Detail', params: { id: dog.id } }"
          class="group bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-[1.02] hover:shadow-xl border border-orange-100"
        >
          <!-- 图片容器 -->
          <div class="relative h-64 overflow-hidden">
            <img 
              :src="dog.picture" 
              :alt="dog.title + '的照片'"
              class="w-full h-full object-cover transform transition-transform duration-300 group-hover:scale-110"
            >
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>

          <!-- 信息区域 -->
          <div class="p-6">
            <h2 class="text-xl font-bold text-orange-900 mb-2 group-hover:text-orange-600 transition-colors">
              {{ dog.title }}
            </h2>
            <div class="flex items-center justify-between">
              <span class="text-sm text-orange-700">点击查看详情</span>
              <svg 
                class="w-5 h-5 text-orange-600 transform transition-transform duration-300 group-hover:translate-x-2" 
                fill="none" 
                stroke="currentColor" 
                viewBox="0 0 24 24"
              >
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
              </svg>
            </div>
          </div>
        </router-link>
      </div>

      <!-- 分页控制 -->
      <div v-if="totalPages > 1" class="mt-12 flex justify-center">
        <div class="inline-flex rounded-lg shadow-sm">
          <!-- 左箭头按钮 -->
          <button
            @click="prevPage"
            :disabled="currentPage === 1"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-l-lg"
            :class="[currentPage === 1 ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </button>

          <!-- 数字页码按钮 -->
          <button
            v-for="page in totalPages"
            :key="page"
            @click="goToPage(page)"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium transition-all duration-300"
            :class="[
              currentPage === page 
                ? 'bg-orange-600 text-white z-10' 
                : 'bg-white text-orange-700 hover:bg-orange-50',
              page === 1 ? 'rounded-none' : '',
              page === totalPages ? 'rounded-r-lg' : '',
              'border border-orange-300',
            ]"
          >
            {{ page }}
          </button>

          <!-- 右箭头按钮 -->
          <button
            @click="nextPage"
            :disabled="currentPage === totalPages"
            class="relative inline-flex items-center px-4 py-2 text-sm font-medium bg-white border border-orange-300 rounded-r-lg"
            :class="[currentPage === totalPages ? 'cursor-not-allowed' : 'hover:bg-orange-50']"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-orange-600" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="paginatedDogs.length === 0 && !isLoading" class="text-center py-16">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto text-orange-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
        </svg>
        <p class="text-xl text-orange-700">暂无符合条件的宠物</p>
      </div>
    </div>
  </div>
  <fonnter />
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import fonnter from '../../components/fonnter.vue';
import headView from '../../components/head.vue';
import { useAnimalStore } from '../../stores/animalStore';

const router = useRouter();
const animalStore = useAnimalStore();

// 分页相关的逻辑
const itemsPerPage = 6;
const currentPage = ref(1);
const isLoading = ref(true); // 加载状态

// 初始化时获取数据
onMounted(async () => {
  try {
    await animalStore.fetchDogs(1, 2);
  } catch (error) {
    console.error('Failed to fetch dogs:', error);
  } finally {
    isLoading.value = false; // 完成加载
  }
});

const paginatedDogs = computed(() => {
  if (isLoading.value) return [];
  const start = (currentPage.value - 1) * itemsPerPage;
  return animalStore.dogs.slice(start, start + itemsPerPage);
});

const totalPages = computed(() => {
  if (isLoading.value || !animalStore.dogs.length) return 0;
  return Math.ceil(animalStore.dogs.length / itemsPerPage);
});

function goToPage(page) {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}

function nextPage() {
  if (currentPage.value < totalPages.value) {
    goToPage(currentPage.value + 1);
  }
}

function prevPage() {
  if (currentPage.value > 1) {
    goToPage(currentPage.value - 1);
  }
}
</script>

<style scoped>
/* 基础样式 */
.card-container {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6;
}

/* 卡片悬停动画 */
.animal-card {
  @apply transition-all duration-300;
}

.animal-card:hover {
  @apply transform scale-105;
}

/* 图片动画 */
.card-image {
  @apply transition-transform duration-300;
}

.animal-card:hover .card-image {
  @apply scale-110;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  @apply w-2;
}

::-webkit-scrollbar-track {
  @apply bg-orange-100 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-orange-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-orange-700;
}

.us-box {
  width: 100%;
  background: linear-gradient(135deg, #fff9f0 0%, #fef3c7 100%);
  display: flex;
  margin-top: -48px;
  border-bottom: 1px solid rgba(234, 88, 12, 0.2);
}

.animate-fade-in-up {
  animation: fadeInUp 1s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.joinleft {
  padding-top: 80px;
  padding-left: 70px;
  width: 60%;
  text-align: left;
  height: 250px;
}

.joinleft > h1 {
  font-family: 'Arial', sans-serif;
  font-size: 50px;
  font-weight: 600;
  color: #7c2d12;
}

.joinleft > p {
  font-size: 22px;
  color: #9a3412;
}

.joinright {
  height: 250px;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0px); }
}
</style>